<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Tab选项卡实例</title>
<style type="text/css">
    .J-tab .active{background-color:#03A9F4;}
    .J-tab div{display:none;}
</style>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>

<div ng-controller="Aaa">
    <my-tab my-id="div1" my-data="sports" class="J-tab"></my-tab>
    <my-tab my-id="div2" my-data="time" class="J-tab"></my-tab>
</div>

<div>
    <hello>
        <hi></hi>
    </hello>
</div>


<script type="text/javascript">

/**
 * angular的scope作用域
 */

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.sports = [
        {title : '篮球',content : '乔丹'},
        {title : '足球',content : '莱昂纳多'},
        {title : '排球',content : '中国女排'}
    ];
    $scope.time = [
        {title : '上午',content : '敲代码'},
        {title : '中午',content : '看电脑'}
    ];
}]);

m1.directive('myTab',function(){
    return {
        restrict : 'E',
        replace : true,
        scope : {
            //myId : '@',
            myData : '='
        },
       /* controller : ['$scope',function($scope){
            $scope.name = 'this is a xiecg';
        }],*/
        template: '<div id="{{myId}}">\
                    <input ng-repeat="data in myData" type="button" ng-value="data.title" ng-class="{active:$first}">\
                    <div ng-repeat="data in myData" ng-style="{display:$first?\'block\':\'none\'}">{{data.content}}</div>\
                </div>',
        link: function(scope,element,attr){
            element.on('click','input',function(){
                var self = $(this) , i = self.index();
                self.addClass('active').siblings('input').removeClass('active');
                self.siblings('div').eq(i).show().siblings('div').hide();
            });
        }
    };
});




/**
 * require使用其他自定义指令里的方法
 */

var m2 = angular.module('myApp',[]);

m2.directive('hello',function(){
    return {
        restrict : 'E',
        replace : true,
        transclude : true,   //允许自定义指令的嵌套，通过ng-transclude指定嵌套的范围
        controller : function($scope){
            $scope.name = 'xiecg';
            this.name = 'xie';    //使用this共享给其他指令
        },
        template : '<div>hello angular <h1 ng-transclude></h1></div>'
    };
});

m2.directive('hi',function(){
    return {
        restrict : 'E',
        replace : true,
        require : '?^hello',//hello指令属性hi指令的父级，需要用^符号指定。如果无法指定，使用?容错处理。
        template : '<span>hi angular {{name}}</span>',
        link : function(scope,element,attr,reController){
            console.log(reController);    //得到父级hello指令中共享出来的数据
        }
    };
});



</script>
</body>
</html>
